<template>
<div>
  <ca-header>
    <h2>首页</h2>
  </ca-header>
  <mt-swipe :auto="4000">
    <mt-swipe-item
      v-for="item in swipers"
      :key="item.id"
    >
      <a :href="item.url" target="_blank" rel="noopener noreferrer">
        <img :src="item.imageUrl">
      </a>
    </mt-swipe-item>
  </mt-swipe>
  <div>home</div>
</div>
</template>

<script>
import CaHeader from '@/components/CaHeader';
import { getHomeSwiper } from '@/services';

export default {
  name: 'home',
  data() {
    return {
      isBackShow: true,
      swipers: [],
    };
  },
  components: {
    CaHeader,
  },
  mounted() {
    getHomeSwiper()
      .then((resp) => {
        this.swipers = resp.billboards;
      });
  },
};
</script>

<style lang="scss">
  .mint-swipe {
    width: 100%;
    height: 0;
    position: relative;
    padding-top: 50%;
    background-color: #fedcba;

    &-items-wrap {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;

      img {
        width: 100%;
      }
    }
  }
</style>
